
<template>
  <div>
    <!-- 供应商编辑dialog-->
    <el-dialog
      :title="title"
      width="815.9px"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        :inline="true"
        label-width="105px"
        :rules="dataRule"
        ref="editForm"
        :model="editForm"
        style="position: relative"
      >
        <span class="first-form">
          <el-form-item label="卡序号:" prop="names">
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>

          <el-form-item label="卡类型:" prop="contactName">
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>

        <div class="readBut">读卡</div>
        <div></div>
        <span class="first-form">
          <el-form-item label="卡内号:" prop="idCard">
            <el-input v-model="editForm.idCard"></el-input>
          </el-form-item>
          <el-form-item label="卡状态:" prop="contactName">
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>

        <span class="second-form">
          <el-form-item label="车牌号:" prop="idCard">
            <el-input v-model="editForm.idCard"></el-input>
          </el-form-item>
          <el-form-item label="司机姓名:" prop="contactName" label-width="126px">
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>
        <div></div>

        <span class="second-form">
          <el-form-item label="司机电话:" prop="idCard">
            <el-input v-model="editForm.idCard"></el-input>
          </el-form-item>
          <el-form-item
            label="司机证件号:"
            prop="contactName"
            label-width="126px"
          >
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>
        <div></div>
        <span class="second-form">
          <el-form-item label="结算人:" prop="idCard">
            <el-input v-model="editForm.idCard"></el-input>
          </el-form-item>
          <el-form-item
            label="结算人证件号:"
            label-width="126px"
            prop="contactName"
          >
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>
        <div></div>
        <span class="second-form">
          <el-form-item label="应交卡费:"  prop="idCard">
            <el-input v-model="editForm.idCard"></el-input>
          </el-form-item>
          <el-form-item label="实收卡费:" label-width="126px" prop="contactName">
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>
        <div></div>
        <span class="second-form">
          <el-form-item label="车牌号:" prop="idCard">
            <el-input v-model="editForm.idCard"></el-input>
          </el-form-item>
          <el-form-item label="司机姓名:" prop="contactName" label-width="126px">
            <el-input v-model="editForm.contactName"></el-input>
          </el-form-item>
        </span>
        <div></div>
        <el-form-item label="卡用途:">
          <el-checkbox-group v-model="checkedPurpose">
            <el-checkbox v-for="item in purposes" :label="item" :key="item">{{
              item | purposeFilter
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div></div>
     
            <el-form-item label="备注:">
              <el-input style="width:576px"
                type="textarea"
                placeholder="请输入内容"
                v-model="editForm.contactName"
                maxlength="50"
              >
              </el-input> </el-form-item>
        <span class="second-form"> </span>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
          >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { edit } from '@/api/market/crm.js'
import { getAreaByCode } from '@/api/area.js'
import Area from '@/components/area/area'
export default {
  components: {
    Area
  },
  data () {
    return {
      method: '',
      checkedPurpose: [],
      purposes: ['1', '2', '3'],
      detailsVisible: false,
      areaLabel: {},
      title: '',
      editForm: {
        types: '',
        names: '',
        codes: '',
        idCard: '',
        contactName: '',
        contactPhone: '',
        countyCode: '',
        detailAddress: '',
        id: '',
        addressId: ''
      },
      viewForm: {
        types: '',
        names: '',
        codes: '',
        idCard: '',
        contactName: '',
        contactPhone: '',
        countyCode: '',
        detailAddress: '',
        id: '',
        addressId: ''
      },
      editVisible: false,
      dataRule: {
        names: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        types: [
          { required: true, message: '请选择供应商类型', trigger: 'change' }
        ],
        codes: [
          { required: false, message: '区域编码不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: false, message: '区域编码不能为空', trigger: 'blur' }
        ],
        countyCode: [
          { required: true, message: '请输入公司所在地', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        detailAddress: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
  	handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
    init (method, editForm) {
      if (method === 'add') {
        this.editVisible = true
        this.$nextTick(() => {
          this.$refs.editForm.resetFields()
          this.editForm = {}
        })

        this.editForm.id = ''
        this.editForm.addressId = ''
        this.title = '新增供应商'
      } else if (method === 'edit') {
        this.editVisible = true
        this.method = method
        console.log(editForm.countyCode)

        if (
          editForm.countyCode !== '' &&
          typeof editForm.countyCode !== 'undefined'
        ) {
          let area = JSON.parse(editForm.countyCode)
          let that = this
          this.$nextTick(() => {
            that.$refs.area.province = area.province
            that.$refs.area.city = area.city
            that.$refs.area.district = area.district
          })
        } else {
          let that = this
          this.$nextTick(() => {
            that.$refs.area.province = ''
            that.$refs.area.city = ''
            that.$refs.area.district = ''
          })
        }
        this.$nextTick(() => {
          this.$refs.editForm.resetFields()
          this.editForm = editForm
        })

        this.title = '编辑供应商'
      } else if (method === 'view') {
        this.method = method
        this.title = '供应商详情'
        this.detailsVisible = true
        this.viewForm = editForm
        let areaLabel = JSON.parse(this.viewForm.countyCode)
        getAreaByCode(areaLabel).then((res) => {
          if (res.data.code === '200') {
            this.areaLabel = res.data.result.list[0]
            console.log(this.areaLabel)
          }
        })

        console.log(this.editForm)
      }
    },
    getArea1 (e) {
      if (e.province !== '' && e.city !== '' && e.district !== '') {
        this.editForm.countyCode = JSON.stringify(e)
      } else {
        this.editForm.countyCode = ''
      }
    },
    close () {
      this.editVisible = false
    },
    doSubmit () {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (
            this.editForm.countyCode !== '' &&
            typeof this.editForm.countyCode !== 'undefined'
          ) {
            console.log(this.editForm.countyCode)
            this.$set(this.editForm, 'props', 2)
            edit(this.editForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.editVisible = false
                this.$emit('refreshDataList')
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.first-form ::v-deep .el-input__inner {
  width: 170px;
}
.second-form ::v-deep .el-input__inner {
  width: 220px;
}
.readBut {
width: 93px;
height: 50px;
background: #1890ff;
border-radius: 5px;
position: absolute;
right: 40px;
top: 20px;
font-size: 23px;
font-weight: 400;
color: #ffffff;
text-align: center;
padding-top: 12px;
cursor:pointer;
}
.view-container {
  margin-bottom: 20px;
  display: flex;
  .label-container {
    width: 150px;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
  }
  .form-container {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    width: 200px;
  }
}

</style>
